<template>
  <div class="equipmentDialogWrap">
    <el-form
      label-width="120px"
      :model="terminalDialogForm"
      :rules="terminalDialogRules"
      ref="terminalDialogForm"
      :disabled="terminalDialog.disabled"
    >
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="类型:" prop="rptNo">
              <el-select
                size="small"
                filterable
                v-model="terminalDialogForm.rptNo"
                :placeholder="[
                  !terminalDialog.disabled ? '请选择类型' : ' ',
                ]"
                @change="rptNoListChange"
              >
                <el-option
                  v-for="item in rptNoList"
                  :key="item.rptNo"
                  :label="item.rptName"
                  :value="item.rptNo"
                >
                  <span style="float: left">{{ item.rptName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rptNo }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商:" prop="rpsNo">
              <el-select
                size="small"
                filterable
                v-model="terminalDialogForm.rpsNo"
                :placeholder="[!terminalDialog.disabled?'请选择供应商':' ']"
                @change="rpsNoListChange"
              >
                <el-option
                  v-for="item in rpsNoList"
                  :key="item.rpsNo"
                  :label="item.rpsName"
                  :value="item.rpsNo"
                >
                  <span style="float: left">{{ item.rpsName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpsNo }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号:" prop="rpmNo">
              <el-select
                size="small"
                filterable
                v-model="terminalDialogForm.rpmNo"
                :placeholder="[!terminalDialog.disabled?'请选择型号':' ']"
                @change="rpmNoChange"
              >
                <el-option
                  v-for="item in rpmNoList"
                  :key="item.rpmNo"
                  :label="item.rpmName"
                  :value="item.rpmNo"
                >
                  <span style="float: left">{{ item.rpmName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpmNo }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备编号:" prop="rsSn">
              <el-input v-model="terminalDialogForm.rsSn" :placeholder="[!terminalDialog.disabled ? '请输入设备编号' : ' ']" size="small" :disabled="terminalDialog.type=='add'?false:true" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备简称:" prop="rtName">
              <el-input
                v-model="terminalDialogForm.rtName"
                :placeholder="[
                  !terminalDialog.disabled ? '请输入设备简称' : ' ',
                ]"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <div v-if="terminalDialogForm.rptNo =='17'">
            <el-col :span="8">
              <el-form-item label="份数:" prop="copy">
                <el-input-number v-model="terminalDialogForm.copy" size="small" @change="handleChange" :step-strictly="true" :min="1" :max="3" ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联数:" prop="joint">
                <el-input-number v-model="terminalDialogForm.joint" size="small"  @change="handleChange" :step-strictly="true" :min="1" :max="2"></el-input-number>
              </el-form-item>
            </el-col>
          </div>
          <div v-for="(rtParaItem,index) in terminalDialogForm.rtParaList" :key="rtParaItem.key">
            <el-col :span="8"  v-if="terminalDialogForm.rptNo =='17'||(terminalDialogForm.rptNo =='19'&&rtParaItem.key != 'token')" >
              <el-form-item 
              :label="rtParaItem.name"
              :prop="'rtParaList.' + index + '.val'"
              >
              <!-- :rules="{ required: rtParaItem.required, message: `${rtParaItem.name}不能为空`, trigger: 'blur' }" -->
              
                <el-input :type="rtParaItem.typeKey" v-model="rtParaItem.val" :placeholder="[!terminalDialog.disabled?`请输入${rtParaItem.name}`:' ']" size="small"></el-input>
              </el-form-item>
            </el-col>
          </div>
         
        </el-row>
      </el-card>

      <el-card class="box-card"  style="margin-top:20px;min-height:500px;">
       <div class="boxCardTit">绑定门店/收银员</div>
        <el-row :gutter="20">
          <el-col :span="20" v-if="this.selectMer.userMerchantType === 1">
            <el-form-item label="商户:" prop="rpiNo">
              <el-select
                size="small"
                filterable
                v-model="terminalDialogForm.rpiNo"
                :placeholder="[!terminalDialog.disabled?'请选择商户':' ']"
                @change="rpiNoListChange"
                v-if="terminalDialog.type=='add'"
              >
                <el-option
                  v-for="item in rpiNoList"
                  :key="item.rpiNo"
                  :label="item.rpiName"
                  :value="item.rpiNo"
                >
                  <span style="float: left">{{ item.rpiName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpiNo }}</span>
                </el-option>
              </el-select>

              <el-input v-else disabled v-model="terminalDialogForm.rpiName"  size="small"></el-input>
            </el-form-item>
          </el-col>
          <div style="padding:20px;padding-top:0;" v-if="this.selectMer.userMerchantType !== 1">商户：{{this.selectMer.rpiName}}</div>
        </el-row>
        <div>
          <el-button  type="primary" size="small" style="margin-bottom:20px;" @click="getCheckedNodes" >确定绑定门店/收银员</el-button>
          <el-tree
            style="padding-left:70px;"
            :data="storeAndMerchantTree"
            :props="{
              label: 'rpsName',
              children: 'staffTreeVOS'
            }"
            show-checkbox
            ref="tree"
            node-key="rpsNo"
            :default-checked-keys="defaultCheckedkeys"
            @check-change="storeTreeCheckChange"
            >
          </el-tree>
        </div>
      </el-card>

      <el-card class="box-card"  style="margin-top:20px;max-height:952x;">
        <div class="boxCardTit">绑定终端</div>
        <el-transfer
          style="text-align: left; display: inline-block;"
          filterable
          :titles="['未绑定', '已绑定']"
          :button-texts="['取消绑定', '选择绑定']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :props="{
            key: 'rtNo',
            label: 'rtName'
          }"
          :data="transferdata"
          v-model="transferdataVal"
          @change="transferChange"
          >
         <!-- <span slot-scope="{ option }">{{ option.rtName }}</span> -->
        </el-transfer>
        
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { getRpsNo,getModelList,storeAndMerchantTree,terminalTree } from "@/api/rb-merchant/terminal/terminal";
import { mapGetters } from "vuex";

export default {
  props: {
    //表格右侧操作
    terminalDialog: {
      type: Object,
    },
    //类型
    rptNoList: {
      type: Array,
      default: function () {
        return [];
      },
    }, 
    //商户
    rpiNoList: {
      type: Array,
      default:function(){
        return []
      }
    },
    // 设备表单
    terminalDForm:{
      type: Object,
      default:function(){
        return {}
      }
    }
  },
  computed: {
    ...mapGetters(["selectMer"])
  },
  data() {
    return {
      tabsType: {},
      tabsOption: {
        column: [
          {
            label: "添加收银员",
            prop: "0",
          },
          {
            label: "添加终端",
            prop: "1",
          },
        ],
      },
      terminalDialogForm: {
        copy:1,//份数
        joint:1//联数
      },
      terminalDialogRules: {
        rptNo: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        rpsNo: [{ required: true, message: "供应商不能为空", trigger: "blur" }],
        rpmNo: [{ required: true, message: "型号不能为空", trigger: "blur" }],
        rsSn: [
          { required: true, message: "设备编号不能为空", trigger: "blur" },
          {
            pattern:/^[A-Za-z0-9]+$/,message:'设备编号由数字字母组成', trigger: ['blur','change'] 
          }
        ],
        rtName: [{ required: true, message: "设备简称不能为空", trigger: "blur" }],
        // rtPara:[{ required: true, message: '扩展属性不能为空', trigger: 'blur' }]
      },
      storeType: [],
      rpsNoList:[],   // 供应商名称
      rpmNoList:[],   // 型号
      rpiNo:'',
      storeAndMerchantTree:[],//接口获取---门店和收银员
      storeAndMerchantTreeSelect:[],//选择---门店和收银员
      defaultCheckedkeys:[],
      transferdata:[], //接口获取---分配通道data
      transferdataVal: []//分配通道 --- data
    }
  },
  methods: {
    // 字典
    doGetDicts() {
      // 门店或操作员
      getDictionary({ code: "belong_type" }).then((res) => {
        this.storeType = res.data.data;
      });
    },
    // 表单清空
    initEmpty() {
      this.$refs["terminalDialogForm"].resetFields();
      // this.$refs['terminalDialogForm'].terminalDialogForm = {};
      this.$refs["terminalDialogForm"].terminalDialogForm = {};
    },
     // 选择类型---获取供应商
    rptNoListChange(value){
      this.terminalDialogForm.rpsNo="";
      this.rpsNoList=[];
      this.terminalDialogForm.rpmNo="";
      this.rpmNoList=[];

      getRpsNo(-1,-1,{rptNo:value}).then((res)=>{
        this.rpsNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择供应商---获取型号
    rpsNoListChange(value){
      this.terminalDialogForm.rpmNo="";
      this.rpmNoList=[];
      getModelList(-1,-1,{rptNo:this.terminalDialogForm.rptNo,rpsNo:value}).then((res)=>{
        this.rpmNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择商户
    rpiNoListChange(rpiNo){
      if(rpiNo){
        this.rpiNo=rpiNo;
      }else if(this.selectMer.userMerchantType === 2 ){
        this.rpiNo = this.selectMer.rpiNo;
      }
      
      // 门店操作员树结构
      this.getStoreAndMerchantTree();
      //终端树结构
      terminalTree(this.rpiNo).then(res => {
        this.transferdata=res.data.data.terminalTreeVOS;
      })
      this.storeAndMerchantTreeSelect=[];//选择---门店和收银员
      this.transferdataVal=[];//绑定终端
      this.$forceUpdate()
    },
    // 选择型号
    rpmNoChange(value){
      this.terminalDialogForm.rpmNo = value;
      const index = this.rpmNoList.findIndex(obj => obj.rpmNo === value);
      if(index != -1){
        const item = this.rpmNoList[index];
        if(item.romParam){
          const data = eval(item.romParam);
          this.$set(this.terminalDialogForm,'rtParaList',[]);//romParam
          this.terminalDialogForm.rtParaList=JSON.parse(JSON.stringify(data));
          this.$forceUpdate()
        }else{
          this.terminalDialogForm.rtParaList=[];
          this.$forceUpdate()
        }
      }else{
        this.$forceUpdate()
      }
    },
    // 门店操作员树结构
    getStoreAndMerchantTree(){
      storeAndMerchantTree(this.rpiNo).then(res => {
        this.storeAndMerchantTree=res.data.data.storeTreeVOS;
      })
    },
    handleCloseTag(tag){
      let index =this.tagList.indexOf(tag);
      this.tagList.splice(index, 1);
    },
    // 通过 node 获取  选中 tree 的节点
    getCheckedNodes() {
      let getCheckedNodes=this.$refs.tree.getCheckedNodes();
      if(getCheckedNodes.length < 1){
        this.$message({
          message: '请先选择下方的门店/收银员',
          type: 'warning'
        });
      }else{
        getCheckedNodes.forEach((item,index) => {
           if(item.hasOwnProperty("staffTreeVOS")){
             getCheckedNodes.splice(index, 1);
           }
        });
      }
      this.storeAndMerchantTreeSelect=getCheckedNodes;
    },
     // 穿梭框
    transferChange() {//value
        // this.transferdata//穿梭框
    }
  },
  watch: {
    terminalDialog: {
      handler() {
        let that = this;
        if (that.terminalDialog.type !== "add") {
          // that.terminalDForm.belongType = that.terminalDForm.belongType + "";
          that.terminalDialogForm = that.terminalDForm;
          let terminalDialogFormCopy=JSON.parse(JSON.stringify(that.terminalDForm))
          that.rpiNo=that.terminalDialogForm.rpiNo;
          
           that.rptNoListChange(terminalDialogFormCopy.rptNo);//get供应商
           that.terminalDialogForm.rpsNo=terminalDialogFormCopy.rpsNo;
           that.rpsNoListChange(terminalDialogFormCopy.rpsNo);//get型号
           that.terminalDialogForm.rpmNo=terminalDialogFormCopy.rpmNo;

           if(that.terminalDialogForm.rpiNo){
             that.rpiNoListChange(that.terminalDialogForm.rpiNo)
           }

          //  回显门店、收银员
           if(that.terminalDialogForm.dto.length>0){
              that.terminalDialogForm.dto.forEach(item =>{
                that.defaultCheckedkeys.push(item.rpsNo);
               that.$forceUpdate();
              })
           }
          //回显终端
           if(that.terminalDialogForm.values.length>0){
              that.terminalDialogForm.values.forEach((item)=>{
                  that.transferdataVal.push(item.rtNo)
              })
              that.$forceUpdate();
           }
            // 回显 扩展属性
          if(this.terminalDialogForm.rtPara){
            this.terminalDialogForm.rtPara = JSON.parse(this.terminalDialogForm.rtPara);//扩展结果
            let data = eval(this.terminalDialogForm.romParam);
            this.terminalDialogForm.romParam = JSON.parse(JSON.stringify(data));//扩展
            
            this.$set(this.terminalDialogForm,'rtParaList',[]);
            this.terminalDialogForm.rtParaList = this.terminalDialogForm.romParam.map(itm=>{
              itm.val=this.terminalDialogForm.rtPara[itm.key];
              return itm
            })
            this.terminalDialogForm.rtParaList = JSON.parse(JSON.stringify(this.terminalDialogForm.romParam))
            this.$forceUpdate();
          }
           that.$forceUpdate();
        }else{
          that.rpiNoListChange()
        }
      },
      deep: true,
      immediate: true,
    }
  },
  created() {
    this.doGetDicts();

  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-input.is-disabled .el-input__inner {
  background-color: #fff;
}

/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #409eff !important;
}
/deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label{
  color: #606266;
}
/deep/ .el-transfer-panel__list.is-filterable{
  height: 300px;
}
/deep/ .el-transfer-panel{
  width: 310px;
}

/deep/ .el-transfer-panel__body{
  height: 350px;
}
.boxCardTit {
  font-size: 18px;
  padding-bottom: 20px;
}

.equipmentDialogWrap{
  height: 750px;
  overflow-y: auto;
  // overflow: hidden;
}
.equipmentDialogWrap::-webkit-scrollbar { width: 0 !important }
</style>
